<template>
<div class="box">
    <div class="box-logo" @click="goHome">喜马拉雅</div>
    <p class="input-wrapper">
        <el-input class="box-input" v-model="input1" placeholder="搜索" :prefix-icon="Search" />
      </p>
      <div class="open-app">打开App</div>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Calendar, Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
const router =useRouter()
const input1 = ref('')
const goHome = () => {
  router.push('/home')
}
</script>

<style scoped>
.box{
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    padding-top: 5px;
.box-logo{
font-size: 16px;
color: #ff4613;
font-weight: 900;
}
.input-wrapper {

margin-left: 10px;
width: 190px;
      ::v-deep(.el-input__wrapper) {
        border-radius: 20px;
        background-color: #eff1f4;
      
      }
    }
    .open-app{
        border: 1px solid #ff4613;
        border-radius: 20px;
        height: 26px;
        width: 70px;
        line-height: 26px;
        text-align: center;
        color:#ff4613; 
        margin-left: 10px;

    }
}
</style>